import React from 'react';
// 注册页第一步组件
import { Form, Input, Button, Toast, Modal } from 'antd-mobile';
// 导入接口
import { docheckphoneApi } from '@/api/regist'
// 导入路由hooks
import { useHistory } from 'react-router-dom';
const Step1 = () => {
    const [form] = Form.useForm();
    const his = useHistory();
    //点击下一步执行的方法
    const onSubmitFn = () => {
        const values = form.getFieldsValue();
        // console.log(values); // {tel:''}
        if (/^1[3-9]\d{9}$/.test(values.tel)) {
            docheckphoneApi(values).then(res => {
                //console.log('res', res);
                if (res.data.code == 200) {
                    // 表示成功
                    Modal.confirm({
                        content: `将向手机号${values.tel}发送短信验证码`,
                        onConfirm: () => {
                            // 点击确定 跳转到第二步
                            his.push({
                                pathname: '/regist/step2',
                                state: {
                                    tel: values.tel
                                }
                            });
                            // console.log('点击确定')
                        }
                    })
                } else {
                    Toast.show({
                        icon: 'fail',
                        content: res.data.message,
                    })
                }
            })
        } else {
            Toast.show({
                icon: 'fail',
                content: '手机号输入有误!!!',
            })
        }


    }

    return (
        <div style={{
            marginTop: '10px'
        }}>
            <Form
                layout='horizontal'
                form={form}
                footer={
                    <Button block type='submit' onClick={onSubmitFn} color='primary' size='large'>
                        下一步
                    </Button>
                }
            >
                <Form.Item
                    name='tel'
                    label='请输入手机号'
                >
                    <Input />
                </Form.Item>
            </Form>
        </div>
    );
}

export default Step1;
